<template>
<div>
  <mavon-editor v-model="value" @imgAdd="$imgAdd" @imgDel="$imgDel" :editable="true" :toolbarsFlag="s_showtool" ref="mavon" @save="save" :ishljs="true" />
</div>
</template>

<script>
import axios from 'axios'
import {
  mavonEditor
} from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

export default {
  name: 'markdown-edit',
  title: 'markdown编辑器',
  data() {
    return {
      value: '',
      img_file: {},
      s_showtool: true
    }
  },
  mounted() {
    this.$refs.mavon.s_fullScreen = false
  },
  methods: {
    save(value, render) {},
    $imgAdd(pos, $file) {
      this.img_file[pos] = $file
      this.uploadimg(pos)
    },
    $imgDel(pos, a, b,c,d) {
      console.log(pos, a, b,c,d);
      console.log(this.img_file[pos]);
    },
    uploadimg(pos) {
      var formdata = new FormData()
      formdata.append('file', this.img_file[pos])
      axios({
        url: 'file/upload',
        method: 'post',
        data: formdata,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        if (res.data.status) {
          this.$refs.mavon.$img2Url(pos, res.data.data.url)
        } else {
          this.$codeError(res)
        }
      }).catch(error => {
        this.$catchError(error)
      })
    }
  },
  components: {
    'mavon-editor': mavonEditor
  }
}
</script>

<style lang="scss">
.markdown-body {
  height: 99%;
}
</style>
